<!--业务使用科室下拉树-->
<template>
  <div>
    <el-tree-select
      v-model="selectedValue"
      :data="deptOptions"
      :default-expand-all="true"
      :clearable = "clearable"
      @clear="clear"
      :filter-node-method="filterNodeMethod"
      :render-after-expand="false"
      check-strictly
      filterable
      :placeholder="placeholder"
      style="width: 100%"
      @node-click="deptSelect"
    />
  </div>
</template>

<script lang="ts" setup>
import {getPersonnelDept, listDept} from "@/api/system/dept";
import {useUserStoreHook} from "@/store/modules/user.ts";

const useUserStore = useUserStoreHook();

const {proxy} = getCurrentInstance() as any;
const emits = defineEmits(["deptSelect"]);
const orgId = ref("");
// 科室树选项
let deptOptions = ref([]);
/** 检索过滤 */
const filterNodeMethod = (value, data) => data.label.includes(value);
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  orgId: {
    type: String,
    default: "",
  },
  // 科室属性
  deptAttributeStr: {
    type: String,
    default: "",
  },
  // 临床标识
  clinicalSignStr: {
    type: String,
    default: "",
  },
  // 是否可清空
  clearable: {
    type: Boolean,
    default:true,
  },
  // 输入框显示内容
  placeholder: {
    type: String,
    default: "选择科室",
  },
  // 是否通过用户角色获取科室字典列表 1 否，2 是
  isToUserRole: {
    type: Number,
    default: 1,
  }
});
// 选中值
const selectedValue = ref(props.value);

watch(
  () => props.value,
  (newValue, _oldValue) => {
    if (!newValue) {
      selectedValue.value = "";
    } else {
      selectedValue.value = newValue;
    }
  }
);

watch(
  () => props.orgId,
  (newValue, _oldValue) => {
    orgId.value = newValue;
    if (orgId.value) {
      getDeptTree();
    }
  },
  {immediate: true, deep: true}
);

function getDeptTree() {
  if (props.isToUserRole === 2) {
    // 通过用户权限获取科室列表
    getPersonnelDept(useUserStore.user.userInfo.userId).then((res: any) => {
      deptOptions.value = proxy.$handleTree(res.data, "deptId", "deptName");
    })
    // deptOptions.value = toRaw(useUserStore.user.deptList);
  } else {
    listDept({
      delFlag: "0",
      status: "0",
      orgId: orgId.value,
      deptAttributeArray: proxy.$stringToArray(props.deptAttributeStr, ","),
      clinicalSignArray: proxy.$stringToArray(props.clinicalSignStr, ","),
    }).then((response) => {
      deptOptions.value = proxy.$handleTree(response.data, "deptId", "deptName");
    })
  }
}

function deptSelect(node) {
  emits("deptSelect", node);
}

function clear() {
  emits("deptSelect", null);
}

function setSelectedValue() {
  selectedValue.value = "";
  // clear()
}

defineExpose({
  setSelectedValue,
});
</script>
<script lang="ts">
export default {
  name: "baseDeptTree",
};
</script>

<style scoped>
:deep(.vue-treeselect__control) {
  margin-bottom: -2px !important;
}

:deep(.vue-treeselect__single-value) {
  top: -2px;
}

:deep(.el-select--small .el-select__wrapper ) {
  height: 30px;
}

:deep(.el-select__wrapper) {
  background-color: rgb(245, 234, 166);

}
</style>
